<template>
    <div :class="['editor-container', 'editor-container_classic-editor', required ? 'required' : '']" ref="editorContainerElement">
        <div class="editor-container__editor search_drop-down">
            <div ref="editorElement">
                <ckeditor
                    ref="editorRef"
                    id="editor"
                    v-if="show"
                    @update:model-value="props.handleChange"
                    :modelValue="props.value"
                    :editor="editor"
                    @blur="props.validate"
                    :config="config"
                    :disabled="props.mode == 'view' || props.mode == 'submit' || props.mode == 'stop' || props.mode == 'cancel'"
                />
            </div>
        </div>
    </div>
</template>
<script setup>
import { Ckeditor } from "@ckeditor/ckeditor5-vue";
import { TableOfContents } from 'ckeditor5-premium-features';

import coreTranslations from 'ckeditor5/translations/zh-cn.js';
import premiumFeaturesTranslations from 'ckeditor5-premium-features/translations/zh-cn.js';
import { InsertOptions, SearchDropDown } from "@/components/common/item/ckeditor";
import {
    ClassicEditor,
    Essentials,
    Paragraph,
    Heading,
    Style,
    Italic,
    Autosave,
    BlockQuote,
    Bold,
    FontBackgroundColor,
    FontColor,
    FontFamily,
    FontSize,
    GeneralHtmlSupport,
    Highlight,
    Indent,
    IndentBlock,
    List,
    ListProperties,
    Mention,
    PasteFromOffice,
    TextTransformation,
    TodoList,
    Underline,
    Fullscreen
} from "ckeditor5";
import mammoth from "mammoth";
import "ckeditor5/ckeditor5.css";

const LICENSE_KEY = "GPL";

import { ref,watch, onMounted, getCurrentInstance } from "vue";
/**
 * @param {Object} props
 * @param {String} props.value 值
 * @param {Array} props.excludeToolBarList 排除的工具栏
 * @param {Array} props.toolBarList 工具栏
 * @param {Array} props.insertOptions 插入菜单
 * @param {Boolean} props.needInsertOptions 是否需要插入菜单
 * @param {String} props.label 标签
 * @param {Boolean} props.isolationDisabled 是否开启隔离模式
 * @param {Function} props.handleChange 值改变的回调
 * @param {String} props.templateVariable 模版变量（带‘{}’)
 */

const props = defineProps(["value", "excludeToolBarList", "toolBarList", "handleChange", "validate", "mode", "insertOptions", "needInsertOptions", "label", "isolationDisabled", "required", "templateVariable"]);
const { appContext } = getCurrentInstance();
const globalFilterFields = appContext.config.globalProperties;

const editor = ClassicEditor
const required = props.required != undefined ? true : false;

const defaultToolBarList = [
    "fullscreen",
    "|",
    "undo",
    "redo",
    "|",
    // "InsertOptions",
    "SearchDropDown",
    "heading",
    "style",
    "|",
    "fontSize",
    "fontFamily",
    "fontColor",
    "fontBackgroundColor",
    "|",
    "bold",
    "italic",
    "underline",
    "|",
    "highlight",
    "blockQuote",
    "|",
    "bulletedList",
    "numberedList",
    "todoList",
    "indent",
];

const config = ref({
    toolbar: {
        items: [
            "fullscreen",
            "|",
            "undo",
            "redo",
            "|",
            "SearchDropDown",
            "heading",
            "style",
            "|",
            "fontSize",
            "fontFamily",
            "fontColor",
            "fontBackgroundColor",
            "|",
            "bold",
            "italic",
            "underline",
            "|",
            "highlight",
            "blockQuote",
            "|",
            "bulletedList",
            "numberedList",
            "todoList",
            "indent",
        ],
        shouldNotGroupWhenFull: true,
    },

    plugins: [
        Essentials,
        Paragraph,
        InsertOptions,
        SearchDropDown,
        BlockQuote,
        Bold,
        FontBackgroundColor,
        FontColor,
        FontFamily,
        FontSize,
        GeneralHtmlSupport,
        Highlight,
        Indent,
        IndentBlock,
        List,
        ListProperties,
        Mention,
        PasteFromOffice,
        TextTransformation,
        TodoList,
        Underline,
        Fullscreen
    ],
    initialData: "",
    licenseKey: LICENSE_KEY,
    placeholder: globalFilterFields.$i18n.global.t("public.type_or_paste_your_content"),
    label: props.label,
    isolationDisabled: props.isolationDisabled != undefined ? true : false,
    templateVariable: props.templateVariable != undefined ? true : false,
    // insertOptions: [],
});

// 设置语言
const languageMode = globalFilterFields.$util.getLanguage()
if(languageMode == 'zh-CN') {
    config.value.translations = [
        coreTranslations,
        premiumFeaturesTranslations
    ]
}

editor.isReadOnly = true
const show = ref(true);
if(props.needInsertOptions != undefined) {
    show.value = editor && config.value && props.insertOptions && props.insertOptions.length > 0
}else {
    show.value = editor && config.value
}


if (!props.value || props.value == "null") {
    props.value = "";
}

const loginType = globalFilterFields.$util.getLoginType()
let env = 'pc'
if(loginType == 5 || loginType == 6) {
    env = 'mo'
}



// watch(() => languageMode,
//     (newValue) => {
//         console.log('languageMode',newValue)
//
//
//     },{
//         immediate: true
//     })



// 配置工具栏
if (props.toolBarList) {
    config.value.toolbar.items = props.toolBarList;
    if(env == 'pc') {
        config.value.toolbar.items.unshift('fullscreen','|')
    }
}
// 排除工具栏
if (props.excludeToolBarList && props.excludeToolBarList.length > 0) {
    config.value.toolbar.items = defaultToolBarList.filter((item) => {
        return !props.excludeToolBarList.includes(item);
    });
}
// 配置下拉菜单选项
if (props.insertOptions && props.insertOptions.length > 0) {
    config.value.insertOptions = props.insertOptions;
}

watch(
    () => props.insertOptions,
    (newValue) => {
        if (newValue && newValue.length > 0) {
            config.value.insertOptions = newValue;
            show.value = editor && config.value && props.insertOptions.length > 0;
        }
    },
);

</script>
<style scoped>
:deep(.large .ck-editor__editable_inline){
    height: 240px !important;
}
</style>
